<template>
    <div class="container">
        <statistics-header header-title="密 接 人 员 数 据 库"></statistics-header>
        <statistics-bar @getType="getType" bar-type="closeContact"></statistics-bar>
        <div class="report-content">
            <div class="search-group">
<!--                <div class="left-content">-->
<!--                    <div class="data-title">数据库信息</div>-->
<!--                    <dlq-search @search="search"></dlq-search>-->
<!--                </div>-->
<!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <div class="item">
                    <div id="chart1" class="chart-item"></div>
                </div>
            </Row>
            <br>
<!--            <Row type="flex" justify="center">-->
<!--                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"-->
<!--                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>-->
<!--            </Row>-->
        </div>
    </div>
</template>
<script>
import {
  getContacCountList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
// import DlqSearch from '@/components/search'
import echarts from 'echarts'
export default {
  components: {
    StatisticsBar,
    StatisticsHeader
    // DlqSearch
  },
  data () {
    return {
      totalnum: 0,
      typeNumObj: [
      ],
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  computed: {},
  mounted () {
    this.init()
    // this.chart1()
  },
  methods: {
    // chart1 (list) {
    //   let myChart = echarts.init(document.getElementById('chart1'))
    //   // 指定图表的配置项和数据
    //   let option = {
    //     xAxis: {
    //       axisLabel: {
    //         show: true,
    //         textStyle: {
    //           fontSize: 18
    //         }
    //       },
    //       legend: {
    //         data: ['累积观察人数', '现有观察人数']
    //       },
    //       data: ['市委党校集中隔离', '富华花园酒店集中隔离', '华人客栈集中隔离', '中富国际集中隔离', '居家隔离', '四县区隔离']
    //       // data: dataAxis,
    //       // axisLabel: {
    //       //   inside: true,
    //       //   textStyle: {
    //       //     color: '#fff'
    //       //   }
    //       // },
    //       // axisTick: {
    //       //   show: false
    //       // },
    //       // axisLine: {
    //       //   show: false
    //       // },
    //       // z: 10
    //     },
    //     grid: {
    //       left: '10%',
    //       right: '10%',
    //       bottom: '0',
    //       top: '10%',
    //       containLabel: true
    //     },
    //     yAxis: {
    //       axisLine: {
    //         show: false
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: '#999',
    //           fontSize: 18
    //         }
    //       }
    //     },
    //     dataZoom: [
    //       {
    //         type: 'inside'
    //       }
    //     ],
    //     series: [
    //       {
    //         name: '累积观察人数',
    //         type: 'bar',
    //         barGap: 0,
    //         itemStyle: {
    //           normal: {
    //             label: {
    //               formatter: '{c}' + '人',
    //               show: true,
    //               position: 'top',
    //               textStyle: {
    //                 fontWeight: 'bolder',
    //                 fontSize: '12',
    //                 color: '#fff'
    //               }
    //             },
    //             color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //               {
    //                 offset: 1,
    //                 color: '#3db0fe'
    //               },
    //               {
    //                 offset: 0,
    //                 color: '#0a81d4'
    //               }
    //             ]),
    //             opacity: 1
    //           }
    //         },
    //         data: list
    //       },
    //       {
    //         name: '现有观察人数',
    //         type: 'bar',
    //         itemStyle: {
    //           color: '#ff9f7f'
    //         },
    //         data: [220, 182, 191, 234, 290]
    //       }
    //       // { // For shadow
    //       //   name: '累积观察人数',
    //       //   type: 'bar',
    //       //   itemStyle: {
    //       //     color: '#83bff6'
    //       //   },
    //       //   barGap: '-100%',
    //       //   barCategoryGap: '40%',
    //       //   label: {
    //       //     normal: {
    //       //       show: true,
    //       //       position: 'top',
    //       //       textStyle: {
    //       //         color: '#83bff6',
    //       //         fontSize: 18
    //       //       }
    //       //     }
    //       //   },
    //       //   data: list,
    //       //   animation: false
    //       // }
    //     ]
    //   }
    //
    //   myChart.setOption(option)
    //   let _this = this
    //   myChart.on('click', function (params) {
    //     console.log(params.name)
    //     _this.$router.push({
    //       name: 'statCloseContact'
    //     })
    //   })
    // },
    chart1 (list, list2) {
      let myChart = echarts.init(document.getElementById('chart1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['累积观察人数', '现有观察人数'],
          bottom: 20
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['市委党校集中隔离', '富华花园酒店集中隔离', '华人客栈集中隔离', '中富国际酒店集中隔离', '居家隔离', '四县区隔离'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#063374',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#00c7ff',
                fontSize: 18
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#00c7ff',
                fontSize: 18,
                width: 1,
                type: 'solid'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#063374',
                fontSize: 18
              }
            }
          }
        ],
        series: [
          {
            name: '累积观察人数',
            type: 'bar',
            data: list,
            barWidth: 50, // 柱子宽度
            barGap: 1, // 柱子之间间距
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#83bff6',
                  fontSize: 18
                }
              }
            },
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    color: '#fff'
                  }
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: '#3db0fe'
                  },
                  {
                    offset: 0,
                    color: '#0a81d4'
                  }
                ]),
                opacity: 1
              }
            }
          },
          {
            name: '现有观察人数',
            type: 'bar',
            data: list2,
            barWidth: 50,
            barGap: 1,
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#83bff6',
                  fontSize: 18
                }
              }
            },
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    color: '#fff'
                  }
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: '#4af0fc'
                  },
                  {
                    offset: 0,
                    color: '#03f2a3'
                  }
                ]),
                opacity: 1
              }
            }
          }
        ]
      }

      myChart.setOption(option)
      let _this = this
      myChart.on('click', function (params) {
        console.log(params.name)
        _this.$router.push({
          name: 'statCloseContact',
          query: { isolated_location: params.name.replace('集中隔离', '').replace('隔离', '') }
        })
      })
    },
    getType (object) {
      console.log(object)
      this.$router.push({
        name: 'statCloseContact',
        query: { follo_up_state: object.type }
      })
    },
    search (value) {
      this.pageObj.pageNo = 1
      this.init(value)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // place_type: this.$common.xeUtils.trim(this.searchObj.place_type),
        ...data
      }
      this.tableLoading = true
      getContacCountList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let list = []
          let list2 = []
          let data1 = [{ name: '市委党校' }, { name: '富华花园酒店' }, { name: '华人客栈' }, { name: '中富国际酒店' }, { name: '居家' }, { name: '四县区' }]
          for (let j = 0; j < data1.length; j++) {
            for (let i = 0; i < data.data.length; i++) {
              if (data.data[i].district === data1[j].name) {
                list.push(data.data[i].num)
                list2.push(data.data[i].curt_num)
              }
            }
          }
          console.log(list)
          this.chart1(list, list2)
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          // for (let i = 0; i < data.data.results.length; i++) {
          // data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
          // data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          // }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .county-group {
        display: flex;
        align-items: center;
    }
    .search-group {
        /*padding: 10px 0;*/
        /*border-bottom: 1px solid #efefef;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .record-num {
        margin-right: 140px;
    }
    .main-table {
        margin-top: -45px;
    }
    .tt {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }
    .chart-item{
        width: 100%;
        height: 800px;
    }
</style>
